<template>
  <div class="page-container">
    <div class="container-box">
      <div class="path"></div>
      <div class="ball"></div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Surround', // 星球环绕效果
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>

<style scoped lang="scss">
@import '~@/styles/variables.scss';

.container-box {
  width: 100%;
  height: 500px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.path {
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: 1px solid black;
}
.ball {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  transform-origin: 0 250px;
  -webkit-animation: clockwise1 15s linear infinite;
  animation: clockwise 10s linear infinite;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: $light-blue;
}
@-webkit-keyframes clockwise {
  0% { -webkit-transform: rotate(-45deg);  }
  100%{ -webkit-transform: rotate(315deg); }
}
@keyframes clockwise {
  0% { -webkit-transform: rotate(-45deg);  }
  100%{ -webkit-transform: rotate(315deg); }
}
</style>
